<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>事件 Events-JQUERY MOBILE 1.0正式版中文手册</title>

<link rel="stylesheet" type="text/css" href="../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script type="text/javascript" src="../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../style/jqmapi.js" tppabs="http://www.jqmapi.com/style/jqmapi.js"></script>
<link rel="shortcut icon" href="../images/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<hr style="color:#595959;" />

<div class="content">
		<h1>事件 event</h1>
  <div class="desc">
    <div>Jquery Mobile提供了一些建于本地事件的自定义事件以用来创建一些有用的钩子.  要注意这些事件是建立于各种已存在的触摸事件之上，比如 鼠标和窗口事件，所以你根据这些事件的存在可以将它们绑定到手持或者桌面的环境中。在使用中你可以通过使用<strong> live()</strong> 或者 <strong>bind()</strong>将他们绑定到其他的Jquery事件。</div></div>
    <p class="alert"><strong>重要说明: 使用 pageInit(),而不是$(document).ready()</strong><br>你学jquery的第一件事就是在 $(document).ready()函数中写代码，所以一切都在dom元素加载后执行。但是在jQuery Mobile中，AJAX会根据你的导航把每个页面的内容加载到dom中，而DOM ready
函数只是在第一个页面加载完毕才会执行。所以要在任何新页面加载并创建是执行脚本，就需要绑定pageinit事件。这个方法会在本页底部详细解释。</p>
    <p class="alert"><strong>重要说明: pageCreate() vs pageInit()</strong><br>Prior to Beta 2 the recommendation to users wishing to 

manipulate jQuery Mobile enhanced page and child widget 

markup was to bind to the pagecreate event. In Beta 2 an 

internal change was made to decouple each of the widgets 

by binding to the pagecreate event in place of direct 

calls to the widget methods. As a result, users binding to 

the pagecreate in mobileinit would find their binding 

executing before the markup had been enhanced by each of 

the plugins. In keeping with the lifecycle of the jQuery 

UI Widget Factory, the initialization method is invoked 

after the create method, so the pageinit event provides 

the correct timing for post enhancement manipulation of 

the DOM and/or Javascript objects. In short, if you were 

previously using pagecreate to manipulate the enhanced 

markup before the page was shown its very likely you'll 

want to migrate to 'pageinit'.</p>
  <h1>触摸事件 Touch events</h1>
  <h1 class="method"><div class="wg">tap(轻击)</div>
  		<div class="info">一次快速完整的轻击后触发</div></h1>
  <h1 class="method"><div class="wg">taphold（轻击不放）</div>
  		<div class="info">轻击并不放（大约一秒）后触发</div></h1>
  <h1 class="method"><div class="wg">swipe(划动)</div>
  		<div class="info">一秒内水平拖拽大于30PX，同时纵向拖曳小于20px的事件发生时触发，但是这些是可以设置的</div></h1>
<div class="code"> 
    <p> <strong>scrollSupressionThreshold (默认: 10px)</strong> 
    – 大于这个值的水平位移, 我们就会抑制滚动</p>
    <p> <strong>durationThreshold (默认: 1000ms) </strong> 
    – 滑动时间超过这个数值就不会产生滑动事件</p>
    <p> <strong>horizontalDistanceThreshold (默认: 30px)</strong> 
    – 水平划动距离超过这个数值才会产生滑动事件</p>
    <p> <strong>verticalDistanceThreshold (默认: 75px)</strong> 
    – 竖直划动距离小于这个数值才会产生滑动事件 </p>
  </div>
  <h1 class="method"><div class="wg">swipeleft（左划）</div>
  		<div class="info">划动事件为向左的方向时触发</div></h1>
  <h1 class="method"><div class="wg">swiperight（右划）</div>
  		<div class="info">划动事件为向右的方向时触发</div></h1>
  <p class="indent"><strong>swipe(划动)：一秒内水平拖拽大于30PX，同时纵向拖曳小?0px的事件发生时触发</strong></p>
  <p class="indent"><strong>swipeleft（左划）：划动事件为向左的方向时触发</strong></p>
  <p class="indent"><strong>swiperight（右划）：划动事件为向右的方向时触发</strong></p>
  <h1>虚拟鼠标事件 Virtual mouse events</h1>
  <div class="desc">
    <div>我们提供了一系列"虚拟的"鼠标事件试图把鼠标和触摸事件抽象

出来。这使得开发者能够给一些基础的鼠标事件，例如mousedown, 

mousemove, mouseup, 和click来注册监听。插件会
在触摸环境中，插件会保持在传统鼠标环境下触发的顺序，例如：

vmouseup总是在vmousedown之前被触发，vmousedown总是在

vmouseup 之前，等等。虚拟鼠标事件也会把书剑中放出的坐标信

息标准化。所以在基于触摸的设备中事件对象的pageX, pageY, 

screenX, screenY, clientX, and clientY这些属性的坐标都可以

用。</div></div>
  <h1 class="method"><div class="wg">vmouseover</div>
  		<div class="info">处理touch 或者 mouseover的正规化的事件</div></h1>
  <h1 class="method"><div class="wg">vmousedown</div>
  		<div class="info">处理touchstart 或者 mousedown 的正规化的事件</div></h1>
  <h1 class="method"><div class="wg">vmousemove</div>
  		<div class="info">处理touchmove 或者 mousemove 的正规化的事件</div></h1>
  <h1 class="method"><div class="wg">vmouseup</div>
  		<div class="info">处理touchend 或者 mouseup 的正规化的事件</div></h1>  <h1 class="method"><div class="wg">vclick</div>
  		<div class="info">处理touchend 或者 鼠标点击 的正规化的事件。在基于触摸的设备上，这个事件是在vmouseup事件<strong>之后</strong>触发的。</div></h1>
<h1 class="method"><div class="wg">vmousecancel</div>
  		<div class="info">处理touch 或者 mouse 的mousecancel的正规化的事件</div></h1>
       <p class="alert">

<strong>警告：小心使用vclick</strong><br>

小心在触摸设备使用vclick。Webkit内核的浏览器会在touchend事

件触发后300ms自己生成mousedown, mouseup,和click 3个事件。

这些生成的鼠标事件的目标会在他们触发的时候被计算出来，并且

是基于touch事件的位置，并且有些情况下会在不同的设备上甚至

相同设备的不同OS会导致不同的计算结果。这就意味着原始的点击

事件的目标语浏览器自己生成的鼠标事件的目标元素可能不是同一

个。<br>

我们建议在触摸后可能会改变你点击的点下面内容的事件中，使用

click而不是vclick方法。
这样的事件包括页面转场和其他的一些行为比如 收缩/伸展 这样

的 可能会导致屏幕有变化或者内容完全被替换的事件。
       </p>
       
       <p class="alert">

<strong>取消一个元素默认点击的行为</strong><br>

应用会调用一个 vclick 事件来取消某个元素的默认点击事件。在

基于鼠标的设备上，对vclick事件调用preventDefault()方法等同

于对真实点击的时间冒泡阶段调用 preventDefault() 方法。在基

于触摸的设备上就有点复杂了，因为真实的点击事件会在vclick 

事件触发300毫秒之后触发。对于触摸设备，对vclick事件调用

preventDefault()方法会一些vmouse插件的一些代码来试图捕获下

一个点击事件。所以根据上述的警告，要匹配一个触摸事件和与他

对应的鼠标事件就比较困难，因为他们的目标是不同的。所以

vmouse插件试图通过坐标来识别一个相符的点击事件通常会失败。

有些情况下两个事件的目标和坐标的识别都会失败，这样就会导致

点击事件被触发或者元素的默认动作会被执行，或者内容被改变或

者替换的情况下，触发了别的元素的点击事件。
如果这样的bug在给定的元素上有规律的发生,我们建议对于动作使

用click来驱动触发。
       </p> 
  <hr>
  <h1>设备方向变化事件 Orientation change event</h1>
  <h1 class="method"><div class="wg">orientationchange</div>
  		<div class="info">&nbsp;</div></h1>
  <div class="desc">
  <div>当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，你的回调函数可以加入第二个参数，作用为描述设备<strong>横或纵向的</strong>属性，&quot;portrait&quot;或;landscape&quot;。这些值也会作为class值加入到html的元素中，使你可以通过css中的选择器改变他们的样式。注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。<br />
  </div></div>
  <hr>
  <h1>滚屏事件 Scroll events</h1>
  <h1 class="method"><div class="wg">scrollstart</div>
  		<div class="info">&nbsp;</div></h1>
  <div class="desc">
  <div>当屏幕滚动开始的时候触发。苹果的设备会在滚屏时冻结DOM的操作，当滚屏结束时按队列执行这些dom操作，我们现在正在研究方法让苹果的设备在滚屏开始前执行dom操作<br />
  </div></div>
  <h1 class="method"><div class="wg">scrollstop</div>
  		<div class="info">&nbsp;</div></h1>


  <div class="desc">
  <div>滚屏结束时触发</div></div>
 
   <h1>页面加载事件 Page load events</h1>
  <div class="desc">
    <div>当外部的页面加载到dom中时，有两个事件被触发。第一个是

pagebeforeload，第二个是pageload ，或者pageloadfailed。</div></div>
  <h1 class="method"><div class="wg">pagebeforeload</div>
  		<div class="info">&nbsp;</div></h1>
  <div class="desc">
  <div>在加载请求发出之前触发，绑定到这个事件的回调函数可以可以对

该事件调用preventDefault()，来表明由他们来处理加载的请求。

这样的做的话回调函数必须对通过数据对象传到回调函数的对象调

用resolve()或者reject()。<br />
  </div></div>
  <div class="desc">
  <div>通过第二个参数传到回调函数的对象包含如下的属性：<br />
  </div></div>
<div class="code"> 
    <p><strong>url (字符串)</strong></p>
通过回调传到$.mobile.loadPage()的绝对或者相对地址
    <p><strong>absUrl (字符串)</strong></p>
url的绝对地址版本。
    <p><strong>dataUrl (字符串)</strong></p>
绝对地址的
当识别页面或者更新浏览器地址的时候使用的绝对地址经过过滤的版本
    <p><strong>deferred (对象)</strong></p>
    <p>针对此事件调用preventDefault()的回调函数必须针对此事件调用<br>
    </p>
    <p>resolve()或者reject()方法，<br>
      使得changePage()的请求恢复。例如:</p>
    <p>$( document ).bind( &quot;pagebeforeload&quot;, function( event, <br>
    </p>
    <p>data ){</p>
    <p> <strong>//让jqm框架知道由我们来处理load事件.</strong></p>
    <p> event.preventDefault();<br>
      <strong>//...加载文档然后插入到DOM中</strong><br>
      <strong>//在这个回调中，或者通过其他的异步加载手段中，<br>
      //调用resolve,转入到下面的参数中，加上一个<br>
      //包含有页面dom元素的jquery选择器。</strong><br>
    </p>
    <p> data.deferred.resolve( data.absUrl, data.options, <br>
    </p>
    <p>page );</p>
    <p>});</p>
</div>
  <h1 class="method">
    <div class="wg">pageload</div>
  		<div class="info">&nbsp;</div></h1>
  <div class="desc">
  <div>在页面已成功加载并插入到DOM后触发。绑定到这个事件的回调函数会被作为一个数据对象作为第二个参数。这个对象包含如下的信息：
<br />
  </div></div>
<div class="code"> 
    <p><strong>url (字符串)</strong></p>
    址
<p><strong>absUrl (字符串)</strong></p>
url的绝对地址版本。</div>
<h1>页面显示/隐藏事件 Page show/hide events</h1>
  <div class="desc">
  <div>在Jquery Mobile中，无论页面显示或是隐藏，都在该页面触发两个事件。哪个事件被触发取决于页面被显示还是隐藏，所以当页面转场发生时，实际?个事件被触发了，每个页面有两个：</div></div>
  <p class="indent">pagebeforeshow：转场之前，页面被显示时触发</p>
  <p class="indent">pagebeforehide：转场之前，页面被隐藏时触发</p>
  <p class="indent">pageshow：转场之后，页面被显示时触发</p>
  <p class="indent">pagehide：转场之后，页面被隐藏时触发</p>
  <div class="desc">
  <div>请注意这4个事件都引用了”上一页“，或”下一页“，这取决于哪一页被显示或者隐藏，以及”上一页“或者”下一页“是否存在。（第一个被显示的page并没?quot;上一?quot;可以引用，但是同样会引用一个空的Jquery对象 ），你可以通过将第二个参数作为一个绑定的回调函数访问这一引用</div></div>
<div class="code"> 
    <p>$('div').live('pageshow',function(event, ui){<br />
　alert('This page was just hidden: '+ ui.prevPage);<br />
});</p>
    <p>$('div').live('pagehide',function(event, ui){<br />
      　alert('This page was just shown: '+ ui.nextPage);<br />
      });</p>
</div> 


  <div class="desc">
  <div>而且，务必在  Jquery Mobile  执行前绑定这些函数，以使  他们在初始化页面加载时被调用。在  mobileinit  事件的处理函数中使用它们既可，详情参?a href="globalconfig.html">global config</a></div></div>
   <h1>页面初始化事件 Page initialization events</h1>
  <div class="desc">
  <div>Jquery Mobile会自动基于page"内的增强的约定自动初始化一些插件?例如：给一个input输入框约定了type=range属性会自动生成一个自定义滑动条</div>
  <div>这些自动初始化的行为是受"page"插件控制的，它在执行前后部署部署事件，允许你在初始化前后操作页面，或者甚至自己提供初始化行为，禁止自动初始化。注以下的页面初始化事件在每个“page”只被触发一次，而显?隐藏 事件则不同，在页面显示或者隐藏的每次，它们都会被触发</div>
  </div>
  
    <p class="indent">pagebeforecreate：页面初始化时，初始化之前触</p>
  <p class="indent">pagecreate：页面初始化时，初始化之后触</p>
  
<div class="code"> 
    <p>$('#aboutPage').live('pagebeforecreate',function(event){<br />
alert('This page was just inserted into the dom!');<br />
});</p>
    <p>$('#aboutPage').live('pagecreate',function(event){<br />
      alert('This page was just enhanced by Jquery Mobile!');<br />
      });<br />
    </p>
</div> 

  <div class="desc">
  <div>注意：通过绑定pagebeforecreate然后return false，你禁止页面插件自己的操作</div>
  </div>


<div class="desc">
  <div>而且，务必在  Jquery Mobile  执行前绑定这些函数，以使  他们在初始化页面加载时被调用。在  mobileinit  事件的处理函数中使用它们既可，详情参?a href="globalconfig.html">global config</a></div></div>
   <h1>动画事件 Animation Events</h1>
  <div class="desc">
  <div>Jquery Mobile提供了animationComplete 插件，你可以用来添加或删除一个class来应用CSS转场效果</div>
  </div>
</div>
</div>
</div>
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



